<!--  -->
<template>
  <div id="business-district-index">
    <c-title :text="pageTitle"></c-title>
    <div class="headTop">
      <div class="himg">
        <img :src="info.member && info.member.avatar" alt="" />
      </div>
      <div class="userBox" v-if="info.member">
        <div class="name">{{ info.member.nickname }}</div>
        <div class="flex-a-c f-12" style="color: #fff;" v-if="info.member.inviter" v-clipboard:copy="info.member.invite_code" v-clipboard:success="onCopy">
          推广码：{{ info.member.invite_code }} <van-button round class="margin-left-6" type="primary" size="mini" style="width: 2.75rem;" color="var(--themeBaseColor)">复制</van-button>
        </div>
      </div>
    </div>
    <van-cell-group inset class="t-l" v-if="info.card && !info.card.is_buy">
      <van-cell title="会员卡">
        <template #right-icon>
          <van-button v-if="info.card && info.card.is_show_buy" @click="beforeBuyCard" round block type="primary" size="mini" style="width: 3.75rem;" color="var(--themeBaseColor)">购买</van-button>
          <van-button @click="addCDKeyPop = true" round plain block type="primary" size="mini" style="width: 3.75rem;" color="var(--themeBaseColor)">卡密</van-button>
        </template>
      </van-cell>
    </van-cell-group>

    <van-cell-group inset class="t-l" v-if="info.card && info.card.is_buy">
      <van-cell :title="info.card.coupon_name" :label="`有效期：${(info.card && info.card.expire_time) || '--'}`">
        <template #right-icon>
          <van-button @click="gotoCoupon" round block type="primary" size="mini" style="width: 3.75rem;" color="var(--themeBaseColor)">查看</van-button>
        </template>
      </van-cell>
    </van-cell-group>

    <van-cell-group inset class="t-l margin-top-10">
      <van-cell title="会员卡购买记录" is-link @click="toUrl('orderlist', { status: 0, orderType: 'BusDist' })" />
      <van-cell
        :title="`${fun.getPluginSetting('love.deduction_love_name', '可用爱心值')}奖励记录`"
        is-link
        @click="toUrl('baseRewardTemplate', {}, { api: 'plugin.business-district.frontend.controllers.index.reward-list' })"
      />
      <template v-if="info.identity">
        <van-cell title="平台" is-link v-if="info.identity.includes(5)" @click="toUrl('BusDistHome', { identity: 'platform' })" />
        <van-cell title="区域代理" is-link v-if="info.identity.includes(4)" @click="toUrl('BusDistHome', { identity: 'agent' })" />
        <van-cell title="推广者" is-link v-if="info.identity.includes(3)" @click="toUrl('BusDistHome', { identity: 'promoter' })" />
        <van-cell title="门店" is-link v-if="info.identity.includes(2)" @click="toUrl('BusDistHome', { identity: 'store' })" />
        <van-cell title="店员" is-link v-if="info.identity.includes(1)" @click="toUrl('BusDistHome', { identity: 'clerk' })" />
        <van-cell title="推荐人" is-link v-if="info.identity.includes(6)" @click="toUrl('BusDistHome', { identity: 'parent' })" />
      </template>
    </van-cell-group>

    <van-cell-group inset class="t-l margin-top-10">
      <van-cell
        :title="`奖池${fun.getPluginSetting('love.deduction_love_name', '可用爱心值')}总额`"
        :value="`分红时间：${(info.reward && info.reward.dividend_time) || '--'}`"
        :label="(info.reward && info.reward.all_love) || '0'"
        value-class="f-11"
        :border="false"
        label-class="f-bold f-24 color-000000"
      />
      <van-row class="t-c margin-top-10">
        <van-col span="12">{{ fun.getPluginSetting("love.deduction_love_name", "可用爱心值") }}</van-col>
        <van-col span="12">{{ fun.getPluginSetting("integral.plugin_name", "消费积分") }}</van-col>
      </van-row>
      <van-row class="t-c f-18 f-bold">
        <van-col span="12">{{ (info.reward && info.reward.love) || "0" }}</van-col>
        <van-col span="12">{{ (info.reward && info.reward.integral) || "0" }}</van-col>
      </van-row>
      <div style="height: 20px;"></div>
    </van-cell-group>

    <van-popup v-model="addInviterPop" class="pop-base-class" position="bottom" round style="background-color: #F5F5F5;" closeable>
      <div class="pop-base-title">购买会员卡</div>
      <div class="pop-base-content">
        <van-cell-group inset>
          <van-field v-model="business_invite_code" label="推荐码" placeholder="请输入推荐码" />
        </van-cell-group>
      </div>
      <div class="pop-base-bottom flex" @click="getLocationCard">
        <van-button round type="danger" block color="var(--themeBaseColor)" style="height: 40px;">确认</van-button>
      </div>
    </van-popup>

    <van-popup v-model="addCDKeyPop" class="pop-base-class" position="bottom" round style="background-color: #F5F5F5;" closeable>
      <div class="pop-base-title">卡密</div>
      <div class="pop-base-content">
        <van-cell-group inset>
          <van-field v-model="cdkey_no" required label="卡号" placeholder="请输入卡号" />
          <van-field v-model="cdkey_pwd" autosize type="textarea" required label="卡密" placeholder="请输入卡密" />
        </van-cell-group>
      </div>
      <div class="pop-base-bottom flex" @click="submitCDKey">
        <van-button round type="danger" block color="var(--themeBaseColor)" style="height: 40px;">确认</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageTitle: "--",
      integral: "",
      info: {},

      addInviterPop: false,
      business_invite_code: "",
      addCDKeyPop: false,
      cdkey_no: "",
      cdkey_pwd: "",
    };
  },

  activated() {
    this.getData();
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
    async getData() {
      let { result, msg, data } = await $http.get("plugin.business-district.frontend.controllers.index.index", {}, ".");
      if (result == 0) return this.$toast(msg);
      this.pageTitle = data.plugin_name;
      this.fun.setWXTitle(this.pageTitle);
      this.info = data;
      this.integral = window.localStorage.getItem("integral") || "消费积分";
    },
    beforeBuyCard() {
      this.business_invite_code = "";
      if (!this.info.member.parent_id) {
        // 没有有上级的购买显示弹窗
        this.addInviterPop = true;
        return;
      }
      this.getLocationCard();
    },
    getLocationCard() {
      this.fun
        .getLocation()
        .then(res => {
          console.log(res);
          this.city = res.city;
          this.business_code = res.addressComponent.adcode;
          this.gotoCard();
        })
        .catch(err => {
          console.log(err);
        });
    },
    async gotoCard() {
      this.isLock = true;
      if (!this.isLock) return;
      let { result, msg, data } = await $http.post(
        "plugin.business-district.frontend.controllers.order.create",
        {
          business_invite_code: this.business_invite_code,
          business_city: this.city,
          business_code: this.business_code
        },
        "."
      );
      this.isLock = false;
      if (result == 0) return this.$toast(msg);
      this.$router.push(this.fun.getUrl("orderpay", { order_ids: data.order_ids }));
    },
    toUrl(name, params = {}, query = {}) {
      if (!name) return;
      this.$router.push(this.fun.getUrl(name, params, query));
    },
    onCopy() {
      this.$toast("复制成功");
    },
    async submitCDKey() {
      if (!this.cdkey_no) return this.$toast("请输入卡号");
      if (!this.cdkey_pwd) return this.$toast("请输入卡密");
      let { result, msg, data } = await $http.get("plugin.business-district.frontend.controllers.cdkey.exchange", {
        cdkey_no: this.cdkey_no,
        cdkey_pwd: this.cdkey_pwd
      }, ".");
      if (result == 0) return this.$toast(msg);
      this.addCDKeyPop = false;
      this.getData();
    },
    gotoCoupon() {
      let search_array = ['2'];
      this.$router.push(this.fun.getUrl("coupon", {},{search_array: JSON.stringify(search_array)}));
    }
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
#business-district-index {
  .headTop {
    padding: 1.5rem 0.75rem 2.875rem;
    background: linear-gradient(var(--themeBaseColor), #f5f5f5);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .userBox {
      display: flex;
      flex-direction: column;
      margin-left: 0.41rem;
      text-align: left;
      flex: 1;
      .name {
        font-size: 1rem;
        color: #ffffff;
        font-weight: bold;
      }
    }

    .himg {
      width: 3.44rem;
      height: 3.44rem;
      border-radius: 100%;
      img {
        width: 100%;
        height: 100%;
        border-radius: 100%;
      }
    }
  }
}
.pop-base-class {
  .pop-base-title {
    margin: 18px 12px 12px;
    font-size: 1rem;
    font-weight: bold;
    text-align: left;
  }
  .pop-base-content {
    min-height: 45vh;
    max-height: 55vh;
    overflow: scroll;
    padding: 0 0 5rem;
  }
  .pop-base-bottom {
    padding: 0.625rem 0.875rem;
    background: #ffffff;
  }
}
</style>
